<script setup lang="ts">
import { computed } from "vue";
import { ElTimePicker } from "element-plus";

const start = defineModel<string>("start");
const end = defineModel<string>("end");

const time = computed<[string, string]>({
  get() {
    return [start.value || '', end.value || ''];
  }, set(val) {
    const [s, e] = val || [];
    start.value = s;
    end.value = e;
  }
})
</script>

<template>
  <ElTimePicker v-model="time"
                is-range
                value-format="HH:mm"
                format="HH:mm"
                range-separator="～"
                start-placeholder="开始时间"
                end-placeholder="结束时间" />
</template>